<template>
  <div>
    <div
      v-for="(domain, kk) in value"
      :key="kk"
      class="formitems"
    >
      <el-input
        v-model="domain.value"
        class="item-input"
        :label="'1参数' + kk"
        :prop="'domains.' + kk + '.value'"
        placeholder="请输入参数1"
        :rules="{
          required: true, message: '参数不能为空', trigger: 'blur'
        }"
      />
      <el-input
        v-model="domain.lable"
        class="item-input"
        :label="'参数' + kk"
        :prop="'domains.' + kk + '.lable'"
        placeholder="请输入参数a"
        :rules="{
          required: true, message: '参数不能为空', trigger: 'blur'
        }"
      />
      <el-button @click.prevent="removeItem(domain)"><i class="el-icon-delete" /></el-button>
    </div>
    <el-button @click="addItem">新增</el-button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: function() {
        return [{
          value: '',
          label: ''
        }]
      }
    }
  },
  data() {
    return {
      domains: [{
        value: '',
        label: ''
      }]
    }
  },
  watch: {
    domains: {
      handler(newVal, oldVal) {
		  console.log(newVal)
        this.$emit('input', JSON.stringify(newVal))
      },
      deep: true
    }
  },
  methods: {
    removeItem(item) {
      console.log(this)
      var index = this.value.indexOf(item)
      if (index !== -1) {
        this.value.splice(index, 1)
      }
    },
    addItem() {
      this.value.push({
        value: '',
        label: ''
      })
    }
  }
}
</script>
<style>
.formitems{margin-bottom: 15px;}
.item-input{    width: 200px;}
</style>
